<template>
  <li class="songlist">
    <span class="index">{{ optimizeIndex }}</span>
    <div class="song">
      <h2>{{ item.name }}</h2>
      <i class="sq"></i>
      <span class="songer">{{ songname }} — {{ item.al.name }}</span>
    </div>
    <span class="play"></span>
  </li>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number,
  },
  computed: {
    songname: function () {
      let songlen = this.item.ar.length;
      let song = this.item.ar;
      if (songlen > 1) {
        let name = "";
        song.forEach(function (i) {
          name += i.name + "/";
        });
        // 去掉最后一个斜线
        name = name.substr(0, name.length - 1);
        return name;
      } else {
        return this.item.ar[0].name;
      }
    },
    optimizeIndex: function () {
      // this.index=this.index+1;
      if (this.index < 10) {
        return "0" + this.index;
      }
      return this.index;
    },
  },
};
</script>

<style lang="less" scoped>
.songlist {
  width: 90%;
  border-bottom: 1px solid #cac8c8;
  display: flex;
  align-items: center;
  padding: 6px 0;
  position: relative;
  .index {
    position: absolute;
    font-size: 18px;
    top: 14px;
    left: -30px;
  }
  .song {
    h2 {
      font-size: 17px;
      color: rgb(51, 51, 51);
    }

    .songer {
      font-size: 12px;
      color: rgb(136, 136, 136);
      display: flex;
      align-items: center;
      &::before {
        content: "";
        width: 12px;
        height: 8px;
        background-color: aqua;
        background: url("../assets/xuebi.png") no-repeat 0 0;
        background-size: 166px 97px;
        margin-right: 5px;
      }
    }
  }
  .play {
    width: 22px;
    height: 22px;
    position: absolute;
    right: 10px;
    display: inline-block;
    background: url("../assets/xuebi.png") no-repeat -24px 0;
    background-size: 166px 97px;
  }
}
</style>